<template>
  <div style="height: 100%;overflow:auto;background-color: #f5f5f5;padding: 0 0 60px 0;font-size: 14px;">
    <header>
      <div>
        <div class="header">
          <div class="user_content">
            <div class="logoContent show_logo_content">
              <a class="header_logo_goHome" @click="homePage">
                <img id="all_top_icon" src="../../../public/img/5d811034-b989-43a5-98cc-82df4bace7de.png" style="height:49px;margin-top:-6px;">
              </a>
              <p id="all_top_title" style="margin-left:12px">购物车</p>
            </div>
            <div class="userinfo login" style="display: block;">
              <a class="header_goHome" @click="homePage">
                <span class="toIndex">
                  返回首页
                </span>
              </a>
              <span v-if="userInfo && userInfo.id">|</span>
              <a v-if="userInfo && userInfo.id" class="header_goUser">
                <span class="username">{{userInfo.phone}}</span>
              </a>
              |
              <a class="header_order">
              <span class="order">
                我的订单
              </span>
              </a>|
              <span class="logout" v-if="userInfo && userInfo.id" @click="logoutFun">退出</span>
              <span class="logout" v-if="!userInfo || !userInfo.id" @click="loginPage">登录</span>
            </div>
          </div>
        </div>

      </div>
    </header>

    <div class="contain-box" style="background-color: #FFFFFF;margin-top: 20px;">
      <div  class="checkout-main" style="">
        <div  class="checkout-detail">
          <div  class="fixed-header" style="display: none;">
            <div  class="fixed-address-choose">
              <a class="choose-btn btn btn-primary">选择该收货地址</a>
              <div  class="address-title">
                <span  class="address-desc"></span>
                <span  class="address-desc"></span>
                <!---->
              </div>
            </div>
          </div>
          <div  class="detail-section address-detail">
            <div  class="address-header">
              <span  class="header-title">收货地址</span>
              <!---->
              <!---->
              <!---->
              <!---->
              <!---->
            </div>
            <!---->
            <div  class="address-list show-less-list" style="">
              <!---->
              <div class="address-item">
                <div class="address-info">
                  <div class="name">张先生<span style="color: rgb(176, 176, 176);"></span>
                  </div>
                  <div class="tel">1897978310</div>
                  <div class="address-con">
                    <span >广东</span>
                    <span >广州市</span>
                    <span >XX区</span>
                    <span >xx街道</span>
                    <span class="info">xxx街13号店</span>
                  </div>
                  <div class="address-action">
                    <span >修改</span>
                    <!---->
                  </div>
                </div>
                <div class="address-info-solt" style="display: none;"></div>
              </div>
              <div class="address-item" @click="openAddrModal">
                <div class="add-desc">
                  <i class="iconfont iconfont-plus el-icon-circle-plus-outline"></i>
                  <span >添加新地址</span>
                </div>
              </div>
              <!---->
            </div>
          </div>
          <!---->
          <div  class="detail-section">
            <div  class="detail-header">商品及优惠券</div>
            <div  class="goods-list">
              <div class="good-item" v-for="(item,index) in products" :key="index">
                <div class="item-desc good-img">
                  <img :src="item.cover">
                </div>
                <div class="item-desc good-name">
                  <a>
                    <span>{{item.productName}}</span>
                  </a>
                </div>
                <div class="item-desc price-box">
                  <div class="item-desc good-price">{{item.price.toFixed(2)}}元 x {{item.num}}</div>
                  <div class="item-desc good-status"></div>
                  <div class="item-desc good-total">{{(item.price * item.num).toFixed(2)}}元</div>
                </div>
              </div>
            </div>
          </div>
          <div  class="detail-section">
            <div  class="section-options section-shipment">
              <div  class="options-desc options-header">
                <div  class="title">配送方式</div>
              </div>
              <div  class="options-desc options-body">
                <div  class="options-list">
                  <div  class="options-item selected">包邮</div>
                </div>
              </div>
            </div>
            <div  class="section-options section-invoice">
              <div  class="options-desc options-header">
                <div  class="title">发票</div>
              </div>
              <div  class="options-desc options-body">
                <div  class="options-list">
                  <div  class="options-item selected">电子普通发票</div>
                  <div  class="options-item selected">个人</div>
                  <div  class="options-item selected">商品明细</div>
                  <a class="options-item selected">修改 &gt;</a>
                </div>
              </div>
            </div>
          </div>
          <div  class="detail-section count-detail">
            <!---->
            <div  class="section-discount">
              <div  class="discount-coupon">
                <!---->
                <div  class="coupon-title coupon-title_recommend has-choose">
                  <i class="iconfont icon-selected el-icon-circle-check"></i>
                  <span  class="use-coupon">正在使用：【新人专享】60元优惠券（满1000元可用）</span>
                  <span class="recommend-text">已选推荐优惠</span>
                  <!---->
                  <!---->
                  <a class="change-btn">修改 &gt;</a>
                </div>
                <!---->
              </div>
            </div>
            <div  class="section-bill">
              <div  class="bill-item">
                <div  class="bill-name">商品件数：</div>
                <div  class="bill-money">{{totalNum}}件</div>
              </div>
              <!---->
              <!---->
              <div  class="bill-item">
                <div  class="bill-name">商品总价：</div>
                <div  class="bill-money">{{totalPrice.toFixed(2)}}元</div>
              </div>
              <!---->
              <div  class="bill-item">
                <div  class="bill-name">活动优惠：</div>
                <div  class="bill-money">-0元</div>
              </div>
              <div  class="bill-item">
                <div  class="bill-name">优惠券抵扣：</div>
                <div  class="bill-money">-60元</div>
              </div>
              <!---->
              <!---->
              <!---->
              <div  class="bill-item">
                <div  class="bill-name">运费：</div>
                <div  class="bill-money">0元</div>
              </div>
              <div  class="bill-item total-price">
                <div  class="bill-name">应付总额：</div>
                <div  class="bill-money">
                  <em >{{(totalPrice - 60).toFixed(2)}}</em>元
                </div>
              </div>
            </div>
          </div>
          <div class="detail-section footer-detail clearfix">
            <!---->
            <div class="handle-action">
              <div class="operating-button">
                <a class="btn btn-primary">提交订单</a>
                <a class="btn btn-return" @click="toCar">返回购物车</a>
              </div>
              <!---->
              <!---->
            </div>
          </div>
        </div>
      </div>

      <el-dialog
        title="添加收货地址"
        :visible.sync="addrModal"
        width="800px"
        center>
        <div>
          <el-form class="login-form"
                   :rules="rules"
                   ref="addrForm"
                   :model="form"
                   label-width="20px">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="name">
                  <el-input v-model="form.name" placeholder="姓名" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="phone">
                  <el-input v-model="form.phone" placeholder="手机号" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="province">
                  <el-select v-model="form.province" placeholder="选择省" clearable style="width: 100%;" @change="selProvince">
                    <el-option
                      v-for="item in provincesAll"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="city">
                  <el-select v-model="form.city" placeholder="选择市" clearable style="width: 100%;" @change="selCity">
                    <el-option
                      v-for="item in citys"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="district">
                  <el-select v-model="form.district" placeholder="选择区" clearable style="width: 100%;">
                    <el-option
                      v-for="item in districts"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="addr">
                  <el-input v-model="form.addr" type="textarea" placeholder="详细地址" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="tag">
                  <el-input v-model="form.tag" placeholder="地址标签" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div style="text-align: center;">
                  <el-button type="primary" style="background-color: #DF2625;border-color: #DF2625;width: 160px;" @click="saveAddr">确定</el-button>
                  <el-button type="primary" style="width: 160px;" plain @click="addrModal=false">取消</el-button>
                </div>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </el-dialog>

    </div>
  </div>

</template>

<script>
  import { mapGetters } from 'vuex';
  import data from '@/data/data.js';
  import { removeToken } from '@/utils/auth';
  export default {
    data() {
      return {
        addrModal: false,
        form:{},
        rules: {
          name: [
            {required: true, message: "请输入收货人姓名", trigger: "change"}
          ],
          phone: [
            {required: true, message: "请输入手机号", trigger: "change"}
          ],
          province: [
            {required: true, message: "请选择省", trigger: "change"}
          ],
          city: [
            {required: true, message: "请选择市", trigger: "change"}
          ],
          district: [
            {required: true, message: "请选择区", trigger: "change"}
          ],
          addr: [
            {required: true, message: "请收入详细地址", trigger: "change"}
          ]
        },
        totalNum: 0,
        totalPrice: 0,
        products:[],
        provinces:[],
        citys:[],
        districts:[],
        provincesAll:[
          {code:'1',name:'广东省'},
          {code:'2',name:'安徽省'},
          {code:'3',name:'北京市'},
          {code:'4',name:'福建省'},
          {code:'5',name:'甘肃省'}
        ],
        citysAll:[
          {parentCode:'1',code:'11',name:'潮州市'},
          {parentCode:'1',code:'12',name:'东莞市'},
          {parentCode:'1',code:'13',name:'佛山市'},
          {parentCode:'1',code:'14',name:'广州市'},
          {parentCode:'1',code:'15',name:'河源市'},

          {parentCode:'2',code:'21',name:'安庆市'},
          {parentCode:'2',code:'23',name:'池州市'},
          {parentCode:'2',code:'22',name:'蚌埠市'},
          {parentCode:'2',code:'24',name:'滁州市'},
          {parentCode:'2',code:'25',name:'阜阳市'}
        ],
        districtsAll:[
          {parentCode:'14',code:'141',name:'白云区'},
          {parentCode:'14',code:'142',name:'从化区'},
          {parentCode:'14',code:'143',name:'番禺区'},
          {parentCode:'14',code:'144',name:'海珠区'},
          {parentCode:'14',code:'145',name:'花都区'}
        ]
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    mounted(){
      this.initOrders();
    },
    methods: {
      //选择省
      selProvince(){
        console.info(this.form.province);
        this.citys = [];
        this.districts = [];
        this.citysAll.forEach(city=>{
          if(this.form.province === city.parentCode){
            this.citys.push(city);
          }
        })
      },
      //选择市
      selCity(){
        this.districts = [];
        this.districtsAll.forEach(district=>{
          if(this.form.city === district.parentCode){
            this.districts.push(district);
          }
        })
      },
      homePage(){//首页
        this.$router.push({path:'/'});
      },
      loginPage(){//登录注册
        this.$router.push({path:'/login'});
      },
      //初始化订单
      initOrders(){
        let value = this.$route.query.value;
        if(value){
          let arr = value.split('*');
          arr.forEach((item) => {
            let paramArr = item.split('_');
            data.products.forEach((product) => {
              if(product.id == paramArr[0]){
                product['num'] = paramArr[1];
                this.totalNum += parseInt(paramArr[1]);
                this.totalPrice += parseInt(paramArr[1]) * product.price;
                this.products.push(product);
              }
            })
          });
        }
      },
      openAddrModal(){
        this.addrModal = true;
        if(this.$refs['addrForm']){
          this.$refs['addrForm'].resetFields();
        }
        this.form = {};
        this.citys = [];
        this.districts = [];
      },
      saveAddr(){//添加地址
        this.$refs.addrForm.validate(valid => {
          if (valid) {

          }
        });
      },
      toCar(){//返回购物车
        this.$router.push({'path':'/cart'});
      },
      logoutFun(){//退出登录
        this.$confirm("确定退出登录?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$notify({
              title: '提示',
              message: '退出成功',
              type: 'success'
              //duration: 0//为0则不会自动关闭
            });
            //清除用户信息缓存
            localStorage.removeItem("userInfo");
            this.$store.commit('SET_USER_INFO', {});
            removeToken();
            this.$router.push({path: '/login'});
          })
      }
    }
  }
</script>

<style scoped>
  .header {
    margin: 0 auto;
    padding-top: 0px;
    background: #f9f9f9;
    height: 50px;
    line-height: 48px;
    border-bottom: solid 1px #d2d2d2;
  }
  .user_content {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
  }
  .logoContent {
    float: left;
    vertical-align: top;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  a {
    text-indent: 0px;
    cursor: pointer;
  }
  .logoContent p, .logoContent img {
    display: inline-block;
  }
  .logoContent img {
    vertical-align: middle;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
  img, fieldset, input {
    border: 0;
    outline: transparent;
  }
  .logoContent p, .logoContent img {
    display: inline-block;
  }
  .logoContent p {
    font-size: 20px;
    line-height: 48px;
  }
  ul, li, p {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .userinfo {
    float: right;
  }
  .userinfo span {
    padding: 0 5px;
    cursor: pointer;
  }


  .checkout-detail{
    position: relative;
    padding: 48px 0 0;
  }
  .checkout-detail .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .checkout-detail .fixed-header .fixed-address-choose {
    position: relative;
    width: 1226px;
    margin: 0 auto;
  }
  .checkout-detail .fixed-header .fixed-address-choose .choose-btn {
    float: right;
  }
  .btn {
    display: inline-block;
    width: 158px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1px solid #b0b0b0;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    color: #b0b0b0;
    cursor: pointer;
    -webkit-transition: all .4s;
    transition: all .4s;
  }
  .checkout-detail .fixed-header .fixed-address-choose .address-title {
    margin: 15px 0 0;
    line-height: 40px;
    color: #757575;
  }
  .checkout-detail .fixed-header .fixed-address-choose .address-title .address-desc {
    display: inline-block;
    margin-right: 25px;
  }
  .checkout-detail .detail-section {
    position: relative;
    padding: 0 24px;
  }
  .checkout-detail .address-detail .address-header {
    margin: 0 0 20px;
  }
  .checkout-detail .address-detail .address-header .header-title {
    color: #333;
    font-size: 18px;
    line-height: 20px;
  }
  .address-list .address-item {
    display: inline-block;
    width: 268px;
    height: 178px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    position: relative;
    margin-right: 17px;
    margin-bottom: 20px;
    vertical-align: top;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
  }
  .address-list .address-action, .address-list .address-info, .address-list .telephone {
    line-height: 22px;
    color: #757575;
  }
  .address-list .address-info {
    padding: 15px 24px 0;
  }
  .address-list .name {
    font-size: 18px;
    color: #333;
    line-height: 30px;
    margin-bottom: 10px;
  }
  .address-list .name span {
    float: right;
    font-size: 14px;
    color: #757575;
  }
  .address-list .address-action {
    text-align: right;
    position: absolute;
    right: 24px;
    bottom: 10px;
    opacity: 0;
  }
  .address-list .address-action, .address-list .address-info, .address-list .telephone {
    line-height: 22px;
    color: #757575;
  }
  .address-list .address-con span {
    display: inline-block;
    margin-right: 3px;
    word-wrap: break-word;
  }
  .address-list .address-con .info {
    width: 100%;
  }
  .address-list .address-action span {
    color: #DF2625;
    margin-left: 10px;
  }
  .address-list .add-desc {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    color: #b0b0b0;
  }
  .address-list .iconfont {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    font-size: 30px;
    line-height: 30px;
    background-color: #e0e0e0;
    border-radius: 17px;
    text-align: center;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    color: #fff;
  }
  /*.iconfont-plus:before {*/
  /*  content: "\E609";*/
  /*}*/
  .checkout-detail .detail-section {
    position: relative;
    padding: 0 24px;
  }
  .checkout-detail .detail-section .detail-header {
    color: #333;
    font-size: 18px;
    line-height: 40px;
  }
  .goods-list {
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
  }
  .goods-list .good-item {
    position: relative;
    padding: 15px 0;
  }
  .goods-list .good-item .good-img {
    width: 60px;
    height: 60px;
    margin: 0 10px 0 0;
  }

  .goods-list .good-item .item-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    color: #424242;
    vertical-align: middle;
  }
  .goods-list .good-item .good-img img {
    width: 60px;
    height: 60px;
  }
  img {
    border: 0;
  }
  .goods-list .good-item .good-name {
    width: 600px;
  }
  .goods-list .good-item .item-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    color: #424242;
    vertical-align: middle;
  }
  .goods-list .good-item .good-name a {
    color: #424242;
  }
  a, a:hover {
    text-decoration: none;
  }
  .goods-list .good-item .good-name a {
    color: #424242;
  }
  .goods-list .good-item .item-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    color: #424242;
    vertical-align: middle;
  }
  .goods-list .good-item .good-price {
    width: 150px;
    text-align: center;
  }
  .goods-list .good-item .item-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    color: #424242;
    vertical-align: middle;
  }
  .goods-list .good-item .good-status {
    width: 100px;
    text-align: center;
  }
  .goods-list .good-item .item-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    color: #424242;
    vertical-align: middle;
  }
  .goods-list .good-item .good-total {
    width: 190px;
    text-align: right;
    color: #ff6701;
  }
  .goods-list .good-item .item-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    color: #424242;
    vertical-align: middle;
  }
  .checkout-detail .detail-section .section-options {
    padding: 25px 0;
    border-bottom: 1px solid #e0e0e0;
  }
  .checkout-detail .detail-section .section-options .options-header {
    width: 150px;
  }
  .checkout-detail .detail-section .section-options .options-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .checkout-detail .detail-section .section-options .options-header .title {
    color: #333;
    font-size: 18px;
    line-height: 38px;
  }
  .checkout-detail .detail-section .section-options .options-desc {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .checkout-detail .detail-section .section-options .options-list {
    width: 960px;
  }
  .checkout-detail .detail-section .section-options .options-list .selected {
    border-color: #fff;
    color: #DF2625;
  }
  .checkout-detail .detail-section .section-options .options-list .options-item {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    margin-right: 14px;
    border: 1px solid #fff;
    color: #333;
  }
  .checkout-detail .detail-section .section-options:last-child {
    border: none;
  }
  .checkout-detail .detail-section .section-options .options-list a {
    cursor: pointer;
  }
  .checkout-detail .count-detail {
    position: relative;
    min-height: 200px;
    padding: 20px 0;
    margin: 0 48px;
  }
  .checkout-detail .count-detail .section-discount {
    position: absolute;
    left: 0;
    top: 20px;
  }
  .checkout-detail .count-detail .discount-coupon, .checkout-detail .count-detail .discount-redpacket, .checkout-detail .count-detail .position-box {
    position: relative;
  }
  .checkout-detail .count-detail .coupon-title.has-choose {
    color: #424242;
    cursor: text;
  }
  .checkout-detail .count-detail .coupon-title.coupon-title_recommend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .checkout-detail .count-detail .coupon-title {
    display: inline-block;
    height: 50px;
    cursor: pointer;
  }
  .checkout-detail .count-detail .icon-selected {
    position: relative;
    color: #83c44e;
    margin: 0 5px 0 0;
    font-size: 22px;
    vertical-align: middle;
    line-height: 20px;
  }
  checkout-detail .count-detail .coupon-title.coupon-title_recommend .use-coupon {
    line-height: 20px;
    max-width: 800px;
  }
  .checkout-detail .count-detail .coupon-title.coupon-title_recommend .over-price-text, .checkout-detail .count-detail .coupon-title.coupon-title_recommend .recommend-text {
    height: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    color: #DF2625;
    border-radius: 3px;
    border: 1px solid #DF2625;
    margin: 0 10px 0 15px;
    padding: 0 3px;
  }
  .checkout-detail .count-detail .coupon-title.coupon-title_recommend .change-btn {
    line-height: 20px;
  }
  .checkout-detail .count-detail .coupon-title.has-choose a {
    color: #DF2625;
    margin-left: 5px;
  }
  .checkout-detail .count-detail .discount-coupon, .checkout-detail .count-detail .discount-redpacket, .checkout-detail .count-detail .position-box {
    position: relative;
  }
  .checkout-detail .count-detail .coupon-title {
    display: inline-block;
    height: 50px;
    cursor: pointer;
  }
  .checkout-detail .count-detail .icon-plus {
    position: relative;
    display: inline-block;
    margin: 0 10px 0 0;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    vertical-align: middle;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #DF2625;
  }
  .checkout-detail .count-detail .section-bill {
    position: absolute;
    right: 0;
    bottom: 20px;
  }
  .checkout-detail .count-detail .section-bill .bill-item {
    position: relative;
    padding-left: 126px;
    line-height: 2;
    text-align: right;
  }
  .checkout-detail .count-detail .section-bill .bill-item .bill-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 126px;
    white-space: nowrap;
    color: #757575;
  }
  .checkout-detail .count-detail .section-bill .bill-item .bill-money {
    color: #DF2625;
  }
  .checkout-detail .count-detail .section-bill .total-price {
    margin: 10px 0 0;
  }
  .checkout-detail .count-detail .section-bill .bill-item .bill-money em {
    font-style: normal;
  }
  .checkout-detail .count-detail .section-bill .total-price em {
    font-size: 30px;
    line-height: 1;
  }
  .checkout-detail .footer-detail {
    padding: 20px 48px;
    border-top: 2px solid #f5f5f5;
  }
  .checkout-detail .detail-section {
    position: relative;
    padding: 0 24px;
  }
  .clearfix:after, .clearfix:before {
    content: " ";
    display: table;
  }
  .checkout-detail .footer-detail{
    height: 80px;
  }
  .checkout-detail .footer-detail .handle-action {
    float: right;
    margin-top: 20px;
  }
  .checkout-detail .footer-detail .handle-action .operating-button {
    overflow: hidden;
  }
  .checkout-detail .footer-detail .handle-action .btn {
    float: right;
    margin-left: 30px;
    vertical-align: top;
  }
  .btn {
    display: inline-block;
    width: 158px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1px solid #b0b0b0;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    color: #b0b0b0;
    cursor: pointer;
    -webkit-transition: all .4s;
    transition: all .4s;
  }
  .checkout-detail .footer-detail .handle-action .btn {
    float: right;
    margin-left: 30px;
    vertical-align: top;
  }
  .btn {
    display: inline-block;
    width: 158px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1px solid #b0b0b0;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    color: #b0b0b0;
    cursor: pointer;
    -webkit-transition: all .4s;
    transition: all .4s;
  }
  a {
    background-color: rgba(0,0,0,0);
  }
  .address-list .address-item:hover {
    border-color: #b0b0b0;
  }
  .checkout-detail .detail-section .section-options .options-list .selected {
    border-color: #fff;
    color: #DF2625;
  }
  .btn-primary {
    background: #DF2625;
    border-color: #DF2625;
    color: #fff;
  }
  .btn-primary:hover {
    background-color: #DF2625;
    border-color: #DF2625;
    color: #fff;
  }
  .el-select-dropdown__item{
    padding: 0 20px!important;
  }
</style>
